<template>
    <a-card class="min-h-[68px] rounded my-[10px]"
            :body-style="{ padding: '0 20px 30px' }"
            :bordered="false">
      <!-- 头部返回列表功能 -->
      <template #extra>
        <a-button class="border-none"
                  icon="rollback"
                  @click="rollback">{{ $t("app.setting.themecolor.rr99") }}
        </a-button>
      </template>
      <!-- <a-progress v-bind:width="400" stroke-linecap="square" :percent="questionnaireInfo.percent"
                  :steps="questionnaireInfo.ModelTopicOver"
                  :format="percent => `${thisProcess}/${questionnaireInfo.ModelTopicCount}`"/> -->
      <!-- 正文头部 -->
      <div slot="title">
        <a-space>
          <div class="ty"></div>
          {{ $route.query.DpiaId }}
        </a-space>
      </div>
      <!-- 头部导航+查看RPA详情 -->
      <div style="margin: 30px 10px 0px 20px">
        <div style="display: flex; justify-content: space-between">
          <!-- 查看详情 -->
          <div style="
              margin-left: 20px;
              margin-top: -6px;
              right: 0;
              position: absolute;
              margin-right: 20px;
              z-index: 5;
            ">
            <rpaDetail :rpaDetailId="id" />
          </div>
        </div>
      </div>
  
      <div class="card-box">
        <div class="card-left">
          <!-- 章节列表 -->
          <a-row>
            <a-col :span="24">
              <div class="card-left">
                <p class="left-title">
                  {{ $t("user.verification-code.required11156611036") }}
                </p>
                <ul style="padding-left: 15px">
                  <li v-for="(item, i) in chapterLists"
                      :key="item.title">
                    <a-space align="center">
                      <a-badge status="processing"
                               style="margin-right: -40px; margin-bottom: 3px"
                               v-if="item.check" />
                      <a-button type="link"
                                @click="changeChapter(item, i)">{{ item.title }}
                      </a-button>
                    </a-space>
                  </li>
                </ul>
              </div>
            </a-col>
          </a-row>
          <!-- 转办备注 -->
          <a-row v-if="ifSeeAll">
            <a-col :span="24">
              <div class="card-left max">
                <p class="left-title1">
                  {{ $t("user.verification-code.required111566110577258") }}
                </p>
                <a-timeline>
                  <a-timeline-item v-for="item in transferList"
                                   :key="item.Id">
                    <div>
                      {{ item.DpiaCommentsDCO + item.DpiaCommentsCreatetime }}
                    </div>
                    <div>
                      {{ $t("user.verification-code.required1115661105763") }}：{{
                        item.DpiaCommentsTypeStr
                      }}
                    </div>
                    <div>
                      <span>{{
                        $t("user.verification-code.required111566181")
                      }}</span>{{ item.DpiaCommentsInfo ? item.DpiaCommentsInfo : "无" }}
                    </div>
                  </a-timeline-item>
                </a-timeline>
              </div>
            </a-col>
          </a-row>
          <!-- 退回备注 -->
          <a-row v-if="ifSeeAll">
            <a-col :span="24">
              <div class="card-left max">
                <p class="left-title">
                  {{ $t("user.verification-code.required1115661105772588888") }}
                </p>
                <a-timeline>
                  <a-timeline-item v-for="item in returnList"
                                   :key="item.Id">
                    <div>
                      {{ item.DpiaCommentsDCO + item.DpiaCommentsCreatetime }}
                    </div>
                    <div>
                      {{ $t("user.verification-code.required1115661105763") }}：{{
                        item.DpiaCommentsTypeStr
                      }}
                    </div>
                    <div>
                      <span>{{
                        $t("user.verification-code.required111566181")
                      }}</span>{{ item.DpiaCommentsInfo ? item.DpiaCommentsInfo : "无" }}
                    </div>
                  </a-timeline-item>
                </a-timeline>
              </div>
            </a-col>
          </a-row>
          <!-- 交换意见(左侧) -->
          <a-row v-if="ifSeeAll">
            <a-col :span="24">
              <div class="card-left max">
                <p class="left-title11">
                  {{ $t("user.verification-code.required11156611057737144226") }}
                </p>
                <a-timeline>
                  <a-timeline-item v-for="item in exchangelist"
                                   :key="item.Id">
                    <div>{{ item.DpiaCommentsCreatetime }}</div>
                    <div>
                      {{ $t("user.verification-code.required1115661105763") }}：{{
                        item.DpiaCommentsTypeStr
                      }}
                    </div>
                    <div>
                      <span>{{ $t(item.DpiaCommentsDCO) }}</span>:{{ item.DpiaCommentsInfo ? item.DpiaCommentsInfo : "无" }}
                    </div>
                  </a-timeline-item>
                </a-timeline>
              </div>
            </a-col>
          </a-row>
        </div>
  
        <!-- 主列表 -->
        <div class="card-right">
          <a-row>
            <a-space class="mb-[15px]">
              <div class="tags"></div>
              {{ $t("user.verification-code.required11156611050") }}
            </a-space>
            <!-- 答题内容 -->
            <div v-if="RpaNoPIOrImportantInvolved ==1 ">
              <p>Dear DCO,</p>
              <p>This is a DPIA that does not involve any Personal Information or Important Data.</p>
              <p>You can check business user activity details clicking the upper right button RPA Details.</p>
              <p>If you have no further questions, you can post your comment and close this DPIA. </p>
              <p>if you still have questions, please get back to the user. </p>
            </div>
            <a-table v-if="RpaNoPIOrImportantInvolved ==0"
                     ref="table"
                     size="middle"
                     class="h-full overflow-x-auto"
                     :pagination="dpiaSimpleAnswerPagination"
                     :dataSource="dpiaSimpleAnswerLists"
                     :rowKey="(record) => record.Id"
                     @change="tableChange">
              <a-table-column key="DpiaChapterTopic"
                              data-index="DpiaChapterTopic"
                              width="200px">
                <span slot="title"
                      class="min-w-90p">{{
                  $t("user.verification-code.required11156611055")
                }}</span>
              </a-table-column>
              <a-table-column key="DpiaChapterTopicAnswer"
                              data-index="DpiaChapterTopicAnswer"
                              width="200px">
                <span slot="title"
                      class="min-w-90p">{{
                  $t("user.verification-code.required111566110056")
                }}</span>
                <span key="DpiaChapterTopicAnswer"
                      slot-scope="text, record">
                  <span v-html="text"></span>
                </span>
              </a-table-column>
            </a-table>

            <!-- 2. -->
            <div>{{Question2Topic}}</div>
            <a-table ref="table"
                    v-if="RpaNoPIOrImportantInvolved ==0 && this.dpiaSimpleAnswerLists2.length > 0"
                    size="middle"
                    class="h-full overflow-x-auto mb-[80px]"
                    :pagination="dpiaSimpleAnswerPagination"
                    :dataSource="dpiaSimpleAnswerLists2"
                    :rowKey="(record) => record.Id"
                    @change="tableChange"
                    width="150px">
              <!-- 数据字段 -->
              <a-table-column key="SourceChildNames"
                              data-index="SourceChildNames"
                              >
                <span slot="title"
                      class="min-w-90p">{{
                  $t("user.v122")
                }}</span>
              </a-table-column>
              <!-- 处理目的及必要性 -->
              <a-table-column key="PurposeNecessityHandling"
                              data-index="PurposeNecessityHandling"
                            >
                <span slot="title"
                      class="min-w-90p">{{
                  $t("user.v123")
                }}</span>
              </a-table-column>
              <!-- 最小必要类型 -->
              <a-table-column key="MinimumNecessaryType"
                              data-index="MinimumNecessaryType"
                              >
                <span slot="title"
                      class="min-w-90p">{{
                  $t("user.v124")
                }}</span>
              </a-table-column>
              <!-- 通过何种途径取得个人同意 -->
              <a-table-column key="ObtainPersonalConsent"
                              data-index="ObtainPersonalConsent"
                              >
                <span slot="title"
                      class="min-w-90p">{{
                  $t("user.v125")
                }}</span>
              </a-table-column>
              <!-- 备注: -->
              <a-table-column key="remarks"
                              data-index="remarks"
                            >
                <span slot="title"
                      class="min-w-90p">{{
                  $t("user.verification-code.required111566181")
                }}</span>
              </a-table-column>
            </a-table>
  
            <!-- Action列表 -->
            <div v-if="pia">
              <a-space class="mb-[15px]"
                       v-if="ifSeeAll">
                <div class="tags"></div>
                {{ $t("user.verification-code.required11156611051") }}
              </a-space>
              <div class="mb-[20px]"
                   v-if="!bianjike && ifSeeAll">
                <!-- 新建Action -->
                <a-button type="primary"
                          icon="plus"
                          @click="createActions">{{ $t("user.verification-code.required11156611052") }}
                </a-button>
              </div>
              <div class="mb-[70px]"
                   v-if="ifSeeAll">
                <a-table ref="table"
                         size="middle"
                         class="h-full overflow-x-auto"
                         :dataSource="dpiaSimpleActionLists"
                         :pagination="false"
                         :rowKey="(record) => record.Id">
                  <a-table-column key="DpiaActionName"
                                  data-index="DpiaActionName">
                    <span slot="title"
                          class="min-w-90p">{{
                 $t("user.verification-code.required1115661105711")
               }}</span>
                  </a-table-column>
                  <a-table-column key="DpiaActionInfo"
                                  data-index="DpiaActionInfo">
                    <span slot="title"
                          class="min-w-90p">{{
                 $t("user.verification-code.required111566173")
               }}</span>
                  </a-table-column>
                  <a-table-column key="action"
                                  :title="$t('menu.exception.not-find')"
                                  width="80px">
                    <template slot-scope="text, record">
                      <span>
                        <!-- 编辑 -->
                        <a-button type="link"
                                  @click="editActions(record.Id)"
                                  v-if="!bianjike">{{
                       $t("user.verification-code.required1115661102")
                     }}</a-button>
                        <a-popconfirm :title="
                       $t('user.verification-code.required111566110577225')
                     "
                                      :ok-text="$t('user.verification-code.required1166')"
                                      :cancel-text="$t('user.email.required11')"
                                      @confirm="delActions(record.Id)">
                          <a-button type="link"
                                    v-if="!bianjike">{{
                       $t("menu.exception.trigger")
                     }}</a-button>
                        </a-popconfirm>
                        <!-- <a-button type="link" @click="delActions(record.Id)">{{ $t('menu.exception.trigger') }}</a-button> -->
                      </span>
                    </template>
                  </a-table-column>
                </a-table>
                <!-- 分页 -->
                <a-pagination size="small"
                              style="
               float: right;
               right: 0;
               position: absolute;
               margin-top: -420px;
             "
                              v-model="dpiaSimpleActionPagination.page"
                              :total="dpiaSimpleActionPagination.total"
                              hideOnSinglePage
                              :pageSize.sync="dpiaSimpleActionPagination.pageSize"
                              @change="actions" />
              </div>
            </div>
  
            <div class="mb-[70px]"
                 v-if="ifSeeAll">
              <!-- DCO评估 -->
              <a-space>
                <div class="tags"></div>
                {{ $t("user.verification-code.required11156611053") }}
              </a-space>
              <div class="mt-[10px]">
                <div>
                  <span>{{ username }} {{ $t("now.in") }} {{ DCDUtime }}</span>
                </div>
                <br />
                <a-textarea v-model="dcoRemark"
                            @change="onchange"
                            :placeholder="
                    $t('user.verification-code.required1115661105311')
                  "
                            :disabled="bianjike"
                            :rows="4" />
              </div>
            </div>
            <div class="mb-[70px]"
                 v-if="exchangeAlllist.length > 0 && ifSeeAll">
              <a-space>
                <div class="tags"></div>
                {{ $t("user.verification-code.required11156611057737144226") }}
              </a-space>
              <!--            <div class="mt-[10px]" v-if="ifflag">-->
              <!--              <span>{{ $t("now.user") }}</span>-->
              <!--              <a-textarea-->
              <!--                  v-model="textdata"-->
              <!--                  :placeholder="-->
              <!--                  $t('user.verification-code.required11156611057737144226')-->
              <!--                "-->
              <!--                  :rows="4"-->
              <!--                  @change="changemark(textdata)"-->
              <!--              />-->
              <!--            </div>-->
              <div class="mt-[10px]"
                   v-for="item in exchangeAlllist"
                   :key="item.Id">
                <div class="dlex">
                  <span>交换意见：{{ item.DpiaCommentsDCO }}</span>
                  <span>{{ item.DpiaCommentsDCO }}  {{ $t("now.in")
                    }}{{ item.Updatetime }}</span>
                </div>
                <a-textarea v-model="item.DpiaCommentsInfo"
                            :placeholder="
                    item.LxDpiaCommentsState === 0
                      ? $t('user.verification-code.required111566110577373')
                      : item.DpiaCommentsInfo
                      ? $t('user.verification-code.required11156611057737144226')
                      : $t('user.verification-code.required111566110577374')
                  "
                            :rows="4"
                            @change="changemark(item.DpiaCommentsInfo)"
                            :disabled="
                    item.DpiaCommentsDCOid != $store.state.user.info.YtId ||
                    !ChangeCommit
                  " />
              </div>
            </div>
          </a-row>
        </div>
      </div>
      <div :style="{
          position: 'fixed',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '20px 16px',
          background: '#fff',
          textAlign: 'center',
          zIndex: 1,
        }">
        <a-button @click="rollback()"
                  style="margin-right: 20px">{{
          $t("app.setting.themecolor.rrrrrrP")
        }}</a-button>
        <!-- 保存 -->
        <a-button @click="saveBAo()"
                  type="primary"
                  v-if="!bianjike"
                  style="margin-right: 20px">{{ $t("user.verification-code.required111566110577200") }}
        </a-button>
        <!-- 交换意见 -->
        <a-button @click="exchange(record)"
                  type="primary"
                  v-if="!bianjike"
                  style="margin-right: 20px">{{ $t("user.verification-code.required11156611057737144226") }}
        </a-button>
        <!-- <a-button @click="dcoBackoffShow()" type="primary" style="margin-right: 20px;">{{ $t('user.verification-code.required111566110577265') }}</a-button> -->
        <!-- 退回 -->
        <a-button @click="dcoBackoffShow()"
                  v-if="!bianjike"
                  style="margin-right: 20px">{{ $t("user.verification-code.required111566110577265") }}
        </a-button>
        <!-- 转办 -->
        <a-button type="primary"
                  @click="transferShow()"
                  v-if="!bianjike"
                  style="margin-right: 20px">{{ $t("user.verification-code.required111566110577299") }}
        </a-button>
        <!-- 上一模块 -->
        <a-button type="primary"
                  v-show="num != 0 && num != undefined"
                  @click="next('black', num--)"
                  :loading="buttonLoading"
                  style="margin-right: 20px">{{ $t("user.verification-code.required11156611057725911") }}
        </a-button>
        <!-- 保存 -->
        <!-- <a-button type="primary" @click="savePush1()" v-if="bianjike">
           保存 
        </a-button> -->
        <!-- 下一模块/完成评估 -->
        <a-button type="primary"
                  @click="
            chapterLists.length - 1 > num ? next('next', num++) : savePush()
          "
                  v-if="!bianjike"
                  :loading="buttonLoading"
                  :style="
            chapterLists.length - 1 > num
              ? 'transition-duration: 0s'
              : 'margin-left: 20px; transition-duration: 0s'
          ">
          {{
            chapterLists.length - 1 > num
              ? this.$t("user.verification-code.required111566110577259")
              : this.$t("user.verification-code.required111566110577260")
          }}
        </a-button>
        <a-button type="primary"
                  @click="
            chapterLists.length - 1 > num ? next('next', num++) : savePush1()
          "
                  v-if="
            (bianjike && chapterLists.length - 1 > num) ||
            (chapterLists.length - 1 == num && ChangeCommit && ifSeeAll)
          ">
          {{
            chapterLists.length - 1 > num
              ? this.$t("user.verification-code.required111566110577259")
              : ifchaning || ChangeCommit
              ? this.$t("user.verification-code.required111566110577372")
              : this.$t("user.verification-code.required111566110577200")
          }}
        </a-button>
        <!-- 转办 -->
        <a-modal v-model="visible"
                 @ok="transfer"
                 :okText="$t('user.verification-code.required111566110577261')"
                 :closable="false"
                 width="400px"
                 :cancel-text="$t('user.email.required11')"
                 v-if="!bianjike">
          <a-space>
            <div class="tags"></div>
            {{ $t("user.verification-code.required111566110577262") }}
          </a-space>
          <br /><br />
          <a-form :label-col="{ span: 7 }"
                  :wrapper-col="{ span: 17 }">
            <a-form-item :label="$t('user.v140')">
              <a-select :placeholder="$t('user.v141')"
                        v-model="dco"
                        show-search
                        option-filter-prop="children"
                        :filter-option="filterOption">
                <a-select-option v-for="item in userList"
                                 :value="item.value"
                                 :key="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item :label="$t('user.verification-code.required111566181')">
              <a-textarea :placeholder="$t('user.verification-code.required1115661812233')"
                          v-model="dcoNote"
                          :rows="4"></a-textarea>
            </a-form-item>
          </a-form>
        </a-modal>
  
        <!-- 退回 -->
        <a-modal v-model="dcoBackoffVisible"
                 @ok="dcoBackoff"
                 :okText="$t('user.verification-code.required111566110577265')"
                 :closable="false"
                 width="300px"
                 :cancel-text="$t('user.email.required11')">
          <a-row>
            <a-col>
              <a-space>
                <div class="tags"></div>
                {{ $t("user.verification-code.required111566110577266") }}
              </a-space>
            </a-col>
          </a-row>
          <a-row>
            <a-col style="margin: 0">
              <a-textarea :placeholder="$t('user.verification-code.required1115661812233')"
                          v-model="dcoNote"
                          style="margin-top: 10px; height: 100px"
                          :rows="4"></a-textarea>
            </a-col>
          </a-row>
        </a-modal>
      </div>
      <!-- 交换意见 -->
      <CoferDrow ref="CoferDrow"
                 :chapterId="chapterId"
                 :idname="idname"
                 :id="id"
                 :username="username"
                 :DcoId22="DcoId22"
                 :idd="idd"
                 @success="getExchangeSee"
                @successAll="getExchangeSeeAll"
                 >
      </CoferDrow>
      <!-- Action的创建 -->
      <createAction ref="createAction"
                    :questionId="id"
                    :chapterId="chapterId"
                    @succeed="actions" />
    </a-card>
  </template>
  
  <script>
  import {
    dpiaChangeState,
    dpiaCompleteAssessment,
    dpiaCompleteAssessmentPush,
    dpiaDcoBackoff,
    dpiaDcoRemarkInfo,
    dpiaDcoRemarkInfoUpdate,
    dpiaDcoTransfer,
    dpiaQuestionAnswerCreate,
    dpiaQuestionChangeStatus,
    dpiaQuestionChapterLists,
    dpiaQuestionInfo,
    dpiaSimpleAction,
    dpiaSimpleAnswer,
    exchangeList,
    exchangeSee,
    rickActiondel,
    transferDetails,
  } from '@/api/dpia/form'
  import Readio from '../../dataAssessment/dpia/onequestion/readio.vue'
  import Checkbox from '../../dataAssessment/dpia/onequestion/checkbox.vue'
  import Esitory from '../../dataAssessment/dpia/onequestion/esitory.vue'
  import Four from '../../dataAssessment/dpia/onequestion/four.vue'
  import RpaDetail from '../../dataAssessment/dpia/onequestion/components/rpaDetail.vue'
  import CreateAction from '../../dataAssessment/dpia/onequestion/components/createAction.vue'
  import { DcoQuery, userQuery } from '@/api/common/form'
  import CoferDrow from '../../dataAssessment/dpia/onequestion/components/coferDorw.vue'
  import { getUserInfo } from '@/api'
  import { quesionFindRpaId, rpaDetail } from '@/api/rpa/form'
  export default {
    components: {
      Readio,
      Checkbox,
      Esitory,
      Four,
      CoferDrow,
      RpaDetail,
      CreateAction, // 创建Action
    },
  
    data() {
      return {
        // DCO评估结果
        dcoRemark: undefined,
        exchangeAlllist: [],
        // 章节答题内容
        columns: [
          // {
          //   title: '题目类型',
          //   className: 'min-w-90p',
          //   dataIndex: 'DpiaChapterTopicType',
          //   scopedSlots: { customRender: 'topicTypeAction' },
          //   align: 'center',
          // },
          {
            title: '题目',
            width: '440px',
            dataIndex: 'DpiaChapterTopic',
            align: 'center',
          },
  
          {
            title: '回答内容',
            className: 'min-w-30p',
            dataIndex: 'DpiaChapterTopicAnswer',
            align: 'center',
            scopedSlots: { customRender: 'dpiaChapterTopicAnswer' },
          },
        ],
        // Action内容
        actionColumns: [
          {
            title: 'Action编号',
            className: 'min-w-90p',
            dataIndex: 'DpiaActionIdTag',
            align: 'center',
          },
          {
            title: '合规要求名称',
            className: 'min-w-90p',
            dataIndex: 'DpiaActionName',
            align: 'center',
          },
          {
            title: 'Action来源',
            className: 'min-w-90p',
            dataIndex: 'DpiaActionSource',
            align: 'center',
          },
          {
            title: '责任人',
            className: 'min-w-90p',
            dataIndex: 'DpiaActionUserResponsible',
            align: 'center',
          },
          {
            title: '发起时间',
            className: 'min-w-90p',
            dataIndex: 'DpiaActionCreatetime',
            align: 'center',
          },
          {
            title: '合规要求描述',
            className: 'min-w-90p',
            dataIndex: 'DpiaActionInfo',
            align: 'center',
          },
          {
            title: '操作',
            className: 'min-w-90p',
            dataIndex: '',
            align: 'center',
            scopedSlots: { customRender: 'action' },
          },
        ],
        dco: undefined,
        dcoNote: undefined,
        // DCO列表
        userList: [],
        // DCO按钮
        dcoButtom: false,
        //查看是否可以编辑
        bianjike: false,
  
        // 上一页按钮控制
        previousPageButtom: true,
  
        // 下一页按钮控制
        nextPageButtom: true,
  
        current: '',
        value: '',
        visible: false,
        //章节id
        Exid: '',
        idname: null,
        // DCO backoff的状态
        dcoBackoffVisible: false,
  
        // 配置分页
        dpiaSimpleAnswerPagination: {
          page: 1,
          pageSize: 10,
          total: 0,
        },
        dpiaSimpleActionPagination: {
          page: 1,
          pageSize: 10,
          total: 0,
        },
        idd: '',
        // 左侧的章节列表
        chapterLists: [],
  
        // 基础答题信息
        questionnaireInfo: {},
  
        // 问题和答案数据
        dpiaQuestionTopicAnswer: {},
  
        // 问卷ID
        id: '',
        //给被交换意见的id
        DcoId22: '',
  
        // 当前选中章节ID
        chapterId: null,
        username: null,
        DCDUtime: null,
        // 获取用户问题答案
        dpiaQuestionUserAnswer: {},
        DpiaUserId: '',
        // 加载状态
        buttonLoading: false,
        // 当前题型
        topicType: 0,
  
        // 是否结束
        finishStatus: 0,
  
        // 已答题的结果
        dpiaQuestionUserLastAnswer: '',
  
        // 答题章节内容
        dpiaSimpleAnswerLists: [],
        dpiaSimpleAnswerLists2:[],
  
        // Action列表
        dpiaSimpleActionLists: [],
        //下一章
        num: 0,
        //转办详情列表
        transferList: [],
        // 退回详情列表
        returnList: [],
        //交换意见列表
        exchangelist: [],
        //进度条
        thisProcess: null,
        // 判断当前是否己有当前用户的交换意见
        ifflag: true,
        // 交换意见设置
        ChangeCommit: 0,
        // 是否在进行评估
        ifchaning: localStorage.getItem('ifchaning') || false,
        lang: localStorage.getItem('lang').includes('zh-CN'),
        ifSeeAll: false,
        //特殊题型
        RpaIfCompletedPIA: 0,
        RpaNoPIOrImportantInvolved: 0,
        pia: false,
        Question2Topic:'',
      }
    },
    created() {
      this.init()
    },
    mounted() {
      localStorage.removeItem('ifchaning')
      let that = this
      window.addEventListener('setItemEvent', function (e) {
        if (e.key == 'lang') {
          let lang = JSON.parse(e.value)
          console.log(lang)
          if (lang == 'zh-EN') {
            that.lang = false
          } else {
            that.lang = true
          }
        }
      })
      this.ifSeeAll =
        this.$route.query?.DpiaCreateUser == this.$store.state.user.info.YtId ||
        this.$route.query.DpiaCreateUserId == this.$store.state.user.info.YtId ||
        this.$route.query.ChangeCommit == 1 ||
        this.$route.query.ifDco == 1 ||
        this.$route.query?.DpiaDcoUserId == this.$store.state.user.info.YtId
    },
    methods: {
      async getList() {
        try {
          // 默认获取第一章节
          const { data: dpiaSimpleAnswerObject } = await dpiaSimpleAnswer({
            id: this.id,
            DpiaChapterId: this.chapterId,
            lang: this.lang ? 0 : 1,
            page: this.dpiaSimpleAnswerPagination.Page,
            pageSize: this.dpiaSimpleAnswerPagination.pageSize,
          })
          const { Page, PageSize, Total, Lists,Question2,Question2Topic } = dpiaSimpleAnswerObject
          this.dpiaSimpleAnswerLists = Lists
          this.dpiaSimpleAnswerLists2 = Question2
          this.Question2Topic = Question2Topic

          if (this.RpaIfCompletedPIA == 1) {
            this.dpiaSimpleAnswerLists[0].DpiaChapterTopicAnswer =
              this.RpaPIALinkUrl
          }
          this.dpiaSimpleAnswerPagination = {
            page: Page,
            pageSize: PageSize,
            total: Total,
          }
        } catch (error) {
          console.log('error:', error)
          this.$message.error(error)
        }
      },
      //分页的方法
      tableChange(e, searchInputs, pagination) {
        this.dpiaSimpleAnswerPagination.Page = e.current
        this.getList()
      },
      async changemark(e) {
        try {
          // 判断状态是新增还是修改 调用不同的api
          await exchangeList({
            DpiaQid: this.id,
            DpiaChapterId: this.chapterId,
            DpiaCommentsDCOid: this.$store.state.user.info.YtId,
            DpiaCommentsDCO: this.$store.state.user.name,
            DpiaCommentsInfo: e,
            DpiaCommentsType: 4,
          })
          this.getExchangeSee()
          this.getExchangeSeeAll()
        } catch (error) {
          console.log('error:', error)
          this.$message.error(error)
        }
        deep: true
      },
      async topicShow() {
        try {
          // 基础信息查询
          const { data: questionnaireInfo } = await dpiaQuestionInfo({
            id: this.id,
          })
          // console.log(this.dpiaSimpleAnswerLists.length);
  
          // 当前进度
          var thisProcess =
            (this.thisProcess / questionnaireInfo.ModelTopicCount) * 100
          // 百分比
          questionnaireInfo.percent = parseFloat(thisProcess).toFixed(2)
          // if (questionnaireInfo.percent == NaN) {
          //   questionnaireInfo.percent = 0
          // }
          questionnaireInfo.percent = eval(questionnaireInfo.percent)
          this.questionnaireInfo = questionnaireInfo
        } catch (error) {
          console.log('error:', error)
          this.$message.error(error)
        }
      },
  
      async next(state) {
        window.scrollTo({ top: 0, behavior: 'smooth' });
        let items = null
        if (this.num < this.chapterLists.length) {
          items = this.chapterLists[this.num]
        }
  
        // 如果是新的章节，默认给它重置一下
        // 保障是首次分页
        // 因为Current默认有效，所以，在重置时记得把current重置为1
        if (items.id != this.chapterId) {
          this.dpiaSimpleAnswerPagination = {
            page: 1,
            pageSize: 10,
            total: 0,
            current: 1,
          }
        }
        this.chapterId = items.id
  
        try {
          for (var i = 0; i < this.chapterLists.length; i++) {
            this.chapterLists[i].check = false
          }
          // 获取DCO评估结论
          const { data: remarkInfo } =
            this.bianjike == true
              ? await dpiaDcoRemarkInfo({
                  DpiaQid: this.id,
                  DpiaChapterId: items.id,
                  DpiaChapterDcoUserId: this.$route.query.DpiaCreateUserId,
                })
              : await dpiaDcoRemarkInfo({
                  DpiaQid: this.id,
                  DpiaChapterId: items.id,
                  DpiaChapterDcoUserId: this.$store.state.user.info.YtId,
                })
          // console.log("-----------------------------1", remarkInfo);
          this.dcoRemark = remarkInfo.DpiaChapterDcoRemark
          this.chapterId = items.id
          this.DCDUtime = remarkInfo.DpiaChapterDcoUpdatetime
          this.username = remarkInfo.DpiaChapterDcoUserName
          this.idd = remarkInfo.Id
          // console.log("this.chapterId", this.chapterId);
          items.check = true
          this.getAction(items)
          //获取交换意见列表
          this.getExchangeSee()
          await this.getExchangeSeeAll()
          if (state == 'black') {
            this.thisProcess -= this.dpiaSimpleAnswerLists.length
          }
          // 默认获取第一章节
          const { data: dpiaSimpleAnswerObject } = await dpiaSimpleAnswer({
            id: this.id,
            DpiaChapterId: items.id,
            lang: this.lang ? 0 : 1,
          })
          const { Page, PageSize, Total, Lists,Question2,Question2Topic } = dpiaSimpleAnswerObject
          this.dpiaSimpleAnswerLists = Lists
          this.dpiaSimpleAnswerLists2 = Question2
          this.Question2Topic = Question2Topic

          if (this.RpaIfCompletedPIA == 1) {
            this.dpiaSimpleAnswerLists[0].DpiaChapterTopicAnswer =
              this.RpaPIALinkUrl
          }
          this.dpiaSimpleAnswerPagination = {
            page: Page,
            pageSize: PageSize,
            total: Total,
          }
          if (state == 'next') {
            this.thisProcess += this.dpiaSimpleAnswerLists.length
          }
          this.topicShow()
        } catch (error) {
          this.$message.error(error)
        }
      },
      async savePush() {
        this.buttonLoading = true
        // 提交保存
        try {
          // 判断是否完成评估
          const { data } = await dpiaCompleteAssessment({
            Id: this.id,
          })
  
          if (!data) {
            // 交换意见未达成
            this.$message.error(this.$t('dpia.completeAssessment.error'))
            this.buttonLoading = false
          } else {
            // 变更状态，跳转到整体评估
            await dpiaChangeState({
              Id: this.id,
              DpiaStatus: 3,
            })
            this.$message.success(
              this.$t('user.verification-code.required111566171')
            )
            this.$router.push({
              path: '/dpia/onequestion/overall',
              query: { ...this.$route.query, id: this.id },
            })
          }
        } catch (error) {
          this.$message.error(error)
          this.buttonLoading = false
        }
      },
      async savePush1() {
        const { data: userinfo } = await getUserInfo()
  
        if (this.ChangeCommit === 1 || this.ifchaning) {
          // 交换意见的提交
          const { data } = await dpiaCompleteAssessmentPush({
            Id: this.id,
            DpiaCommentsExchangeDcoId: userinfo.YtId,
          })
        }
        if (this.bianjike) {
          this.$router.push({ path: '/dpia' })
        } else {
          this.$message.success(
            this.$t('user.verification-code.required111566110577375')
          )
          this.ChangeCommit = 0
        }
        return
      },
      editActions(id) {
        // 编辑action
        this.$refs.createAction.open(id, 'edit', true)
      },
      createActions() {
        // 创建Action
  
        this.$refs.createAction.open(undefined, undefined, true)
      },
      async dcoBackoffShow() {
        this.dcoBackoffVisible = true
      },
      async dcoBackoff() {
        // DCO退回
        try {
          // console.log(this.dcoNote);
          await dpiaDcoBackoff({ id: this.id, DpiaCommentsInfo: this.dcoNote })
          this.$router.push({ path: '/dpia/service' })
          this.$message.success(
            this.$t('user.verification-code.required111566110577267')
          )
          this.dcoNote = undefined
          this.dcoBackoffVisible = false
        } catch (error) {
          this.$message.error(error)
        }
      },
      // 获取安全需求列表
      async getAction(items) {
        const { page, pageSize } = this.dpiaSimpleActionPagination
        // 默认获取第一章节
        const { data: dpiaSimpleActionObject } = await dpiaSimpleAction({
          Id: this.id,
          ChapterId: items.id,
          page,
          pageSize,
        })
        const {
          Page: Page1,
          PageSize: PageSize1,
          Total: Total1,
          Lists: Lists1,
        } = dpiaSimpleActionObject
  
        this.dpiaSimpleActionLists = Lists1
        this.dpiaSimpleActionPagination = {
          page: Page1,
          pageSize: PageSize1,
          total: Total1,
        }
      },
      // 点击章节改变
      async changeChapter(items, i) {
        if (i) {
          this.num = i
        } else {
          this.num = 0
        }
        // 如果是新的章节，默认给它重置一下
        // 保障是首次分页
        // 因为Current默认有效，所以，在重置时记得把current重置为1
        if (items.id != this.chapterId) {
          this.dpiaSimpleAnswerPagination = {
            page: 1,
            pageSize: 10,
            total: 0,
            current: 1,
          }
        }
        this.chapterId = items.id
        try {
          for (var i = 0; i < this.chapterLists.length; i++) {
            this.chapterLists[i].check = false
          }
          // console.log("this.DpiaUserId", this.DpiaUserId);
          // 获取DCO评估结论
          const { data: remarkInfo } =
            this.bianjike == true
              ? await dpiaDcoRemarkInfo({
                  DpiaQid: this.id,
                  DpiaChapterId: items.id,
                  DpiaChapterDcoUserId: this.$route.query.DpiaCreateUserId,
                })
              : await dpiaDcoRemarkInfo({
                  DpiaQid: this.id,
                  DpiaChapterId: items.id,
                  DpiaChapterDcoUserId: this.$store.state.user.info.YtId,
                })
          // console.log("remarkInfo", remarkInfo);
          this.dcoRemark = remarkInfo.DpiaChapterDcoRemark
          this.chapterId = items.id
          this.Exid = items.id
          // console.log(" this.Exid", this.Exid);
          this.idname = remarkInfo.DpiaChapterDcoUserId
          this.username = remarkInfo.DpiaChapterDcoUserName
          this.DCDUtime = remarkInfo.DpiaChapterDcoUpdatetime
          this.idd = remarkInfo.Id
          items.check = true
          // 默认获取第一章节
          const { data: dpiaSimpleAnswerObject } = await dpiaSimpleAnswer({
            id: this.id,
            DpiaChapterId: items.id,
            lang: this.lang ? 0 : 1,
          })
           const { Page, PageSize, Total, Lists,Question2,Question2Topic } = dpiaSimpleAnswerObject
          this.dpiaSimpleAnswerLists = Lists
          this.dpiaSimpleAnswerLists2 = Question2
          this.Question2Topic = Question2Topic
          
          if (this.RpaIfCompletedPIA == 1) {
            this.dpiaSimpleAnswerLists[0].DpiaChapterTopicAnswer =
              this.RpaPIALinkUrl
          }
          this.dpiaSimpleAnswerPagination = {
            page: Page,
            pageSize: PageSize,
            total: Total,
          }
  
          const { page, pageSize } = this.dpiaSimpleActionPagination
          // 默认获取第一章节
          const { data: dpiaSimpleActionObject } = await dpiaSimpleAction({
            Id: this.id,
            ChapterId: items.id,
            page,
            pageSize,
          })
          const {
            Page: Page1,
            PageSize: PageSize1,
            Total: Total1,
            Lists: Lists1,
          } = dpiaSimpleActionObject
  
          this.dpiaSimpleActionLists = Lists1
          this.dpiaSimpleActionPagination = {
            page: Page1,
            pageSize: PageSize1,
            total: Total1,
          }
        } catch (error) {
          console.log('error:', error)
          this.$message.error(error)
        }
      },
      //保存
      async saveBAo(id) {
        this.$router.push({ path: '/dpia' })
        this.$message.success(
          this.$t('user.verification-code.required111566110577308')
        )
      },
      //交换意见
      async exchange() {
        await this.$refs.CoferDrow.open()
      },
      //删除action
      async delActions(id) {
        //调接口
        try {
          // 传过来的id直接请求删除api
          await rickActiondel({ Id: id })
          // 重新初始化列表刷新数据
          this.init()
          this.$message.success(
            this.$t('user.verification-code.required111566110577133')
          )
        } catch (error) {
          this.$message.error(error)
        } finally {
        }
      },
      async transfer() {
        // DCO转办
        try {
          if (this.dco == undefined) {
            this.$message.error(
              this.$t('user.verification-code.required111566110577268')
            )
            return
          }
          var dcoName = ''
          for (var i = 0; i < this.userList.length; i++) {
            if (this.userList[i].value == this.dco) {
              dcoName = this.userList[i].label
            }
          }
          await dpiaDcoTransfer({
            id: this.id,
            DpiaDco: dcoName,
            DpiaDcoUserId: this.dco,
            DpiaCommentsInfo: this.dcoNote,
          })
          this.$message.success(
            this.$t('user.verification-code.required1115661105772699999')
          )
          this.$router.push('/dpia')
          this.visible = false
          this.dcoNote = undefined
        } catch (error) {
          console.log('error:', error)
          this.$message.error(error)
        }
      },
      async transferShow() {
        // 转办的弹窗
        this.visible = true
        // 获取用户列表下拉
        const { data: userList } = await DcoQuery({ ApprovalAlias: 'DCO' })
        this.userList = userList.filter((item) => {
          return item.value !== this.$store.state.user.info.YtId
        })
      },
      async actions(state) {
        // console.log(state);
        // 获取关联的Action
        try {
          let { page, pageSize } = this.dpiaSimpleActionPagination
          if (state == 'action') {
            page = 1
          }
          // console.log(page);
          // 默认获取第一章节
          const { data: dpiaSimpleActionObject } = await dpiaSimpleAction({
            Id: this.id,
            ChapterId: this.chapterId,
            page,
            pageSize,
          })
          const { Page, PageSize, Total, Lists } = dpiaSimpleActionObject
          this.dpiaSimpleActionLists = Lists
          this.dpiaSimpleActionPagination = {
            page: Page,
            pageSize: PageSize,
            total: Total,
          }
        } catch (error) {
          console.log('error:', error)
          this.$message.error(error)
        }
      },
      async init() {
        try {
          // 初始化题库
          var id = this.$route.query.id
          this.DcoId22 = this.$route.query.DpiaChangeDcoId
          this.ChangeCommit = Number(this.$route.query.ChangeCommit)
          this.bianjike =
            Number(this.$route.query.ifDco) ||
            this.$route.query?.DpiaDcoUserId == this.$store.state.user.info.YtId
              ? false
              : true
          // this.bianjike = Number(this.$route.query.ifDco) ? false : true;
          this.id = id
          const { data: rpaDetails } = await quesionFindRpaId({ Id: id })
          // 获取RPA详情
          const { data: rpaDetailInfo } = await rpaDetail({
            Id: rpaDetails.DpiaRpaId,
          })
          this.RpaPIALinkUrl = rpaDetailInfo.RpaPIALinkUrl
          this.RpaIfCompletedPIA = rpaDetailInfo.RpaIfCompletedPIA
          if (
            rpaDetailInfo.RpaIfCompletedPIA == 1 ||
            rpaDetailInfo.RpaNoPIOrImportantInvolved == 1
          ) {
            this.pia = false
          }
          else{
            this.pia = true
          }
          this.RpaNoPIOrImportantInvolved =
            rpaDetailInfo.RpaNoPIOrImportantInvolved
          // 章节列表
          const { data: chapterLists } = await dpiaQuestionChapterLists({
            id: id,
          })
          this.chapterLists = chapterLists
          // console.log(this.chapterLists.length);
          // console.log(this.num);
          // 默认获取第一章节
          await this.changeChapter(this.chapterLists[0])
          this.thisProcess = this.dpiaSimpleAnswerLists.length
          // 获取初步评估Action
          await this.actions()
  
          //获取转办详情
          const { data } = await transferDetails({ Id: this.id })
          // console.log("datazhuan", data);
          this.transferList = data.filter((item) => {
            return item.DpiaCommentsType === 1
          })
          this.returnList = data.filter((item) => {
            return item.DpiaCommentsType === 2
          })
          /**
           * 获取交换意见列表
           */
          await this.getExchangeSeeAll()
  
          /**
           * 获取交换意见Timeline
           */
          await this.getExchangeSee()
          // 基础信息查询
          const { data: questionnaireInfo } = await dpiaQuestionInfo({
            id: this.id,
          })
          this.questionnaireInfo = questionnaireInfo
          this.topicShow()
        } catch (error) {
          console.log('error:', error)
          this.$message.error(error)
        }
      },
      /**
       * 获取交换意见列表
       * @returns {Promise<void>}
       */
      async getExchangeSeeAll() {
        //交换意见详情
        console.log('this.dpiaQuestionUserAnswer.chapter:', this.chapterId)
        const { data: data1 } = await exchangeSee({
          DpiaQid: this.id,
          DpiaChapterId: this.chapterId,
          DpiaCommentsType: 4,
        })
        var DpiaChapterDcoUserId = ''
        data1.forEach((item) => {
          if (item.DpiaCommentsDCOid !== this.$store.state.user.info.YtId) {
            DpiaChapterDcoUserId = item.DpiaCommentsDCOid
            if (!item.LxDpiaCommentsState) {
              item.DpiaCommentsInfo = ''
            }
          }
        })
        this.DpiaUserId = DpiaChapterDcoUserId
  
        // console.log("this.DpiaChapterDcoUserId", this.DpiaUserId);
        this.exchangeAlllist = data1
        // 遍历获取是否当前用户有可用的输入框
        data1.forEach((element) => {
          if (element.DpiaCommentsDCOid === this.DcoId22) {
            this.ifflag = false
          }
        })
      },
      async getExchangeSee() {
        //交换意见详情
        const { data: data1 } = await exchangeSee({
          DpiaQid: this.id,
          DpiaCommentsType: 3,
        })
        // console.log("datazhuanjiao", data1);
        var DpiaChapterDcoUserId = ''
        data1.forEach((item) => {
          if (item.DpiaCommentsDCOid !== this.$store.state.user.info.YtId) {
            DpiaChapterDcoUserId = item.DpiaCommentsDCOid
          }
        })
        this.DpiaUserId = DpiaChapterDcoUserId
        this.exchangelist = data1
        // 遍历获取是否当前用户有可用的输入框
        data1.forEach((element) => {
          if (element.DpiaCommentsDCOid === this.DcoId22) {
            this.ifflag = false
          }
        })
      },
      async pageInit(obj) {
        this.dpiaQuestionUserAnswer = obj
        try {
          // 获取答案
          if (this.dpiaQuestionUserAnswer != {}) {
            // 把答题的结果拿到
            await dpiaQuestionAnswerCreate({
              DpiaChapterId: this.dpiaQuestionUserAnswer.chapter,
              DpiaQid: this.id,
              DpiaChapterTopicId: this.dpiaQuestionUserAnswer.topic,
              DpiaChapterTopicAnswer:  encodeURIComponent(this.dpiaQuestionUserAnswer.answer),
              DpiaChapterTopicType: this.dpiaQuestionTopicAnswer.topic.type,
            })
            // 清空答案
            this.dpiaQuestionUserAnswer = {}
          }
        } catch (error) {
          console.log('error:', error)
          this.$message.error(error)
        }
      },
  
      async showModal() {
        this.visible = true
        // 获取用户列表下拉
        const { data: userList } = await userQuery(1)
  
        this.userList = userList
      },
      async handleOk(e) {
        // 交卷
        if (this.dco == undefined) {
          this.$message.error(
            this.$t('user.verification-code.required111566110577268')
          )
          return
        }
        try {
          await dpiaQuestionChangeStatus({
            Id: this.id,
            DpiaStatus: 2,
            DpiaDcoUserId: this.dco,
          })
          this.$message.success(
            this.$t('user.verification-code.required111566110577270')
          )
        } catch (error) {
          console.log(error)
          this.$message.error(error)
        }
  
        this.topicShow()
        this.visible = false
        // 开启那个结果页
        this.finishStatus = 1
      },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text
            .toLowerCase()
            .indexOf(input.toLowerCase()) >= 0
        )
      },
      rollback() {
        this.$router.push('/Portal')
      },
      async onchange(e) {
        // console.log(e);
        try {
          // 更新创建备注
          await dpiaDcoRemarkInfoUpdate({
            DpiaChapterDcoRemark: this.dcoRemark,
            DpiaQid: this.id,
            DpiaChapterId: this.chapterId,
          })
          // 获取DCO评估结论
          const { data: remarkInfo } =
            this.bianjike == true
              ? await dpiaDcoRemarkInfo({
                  DpiaQid: this.id,
                  DpiaChapterId: this.chapterId,
                  DpiaChapterDcoUserId: this.$route.query.DpiaCreateUserId,
                })
              : await dpiaDcoRemarkInfo({
                  DpiaQid: this.id,
                  DpiaChapterId: this.chapterId,
                  DpiaChapterDcoUserId: this.$store.state.user.info.YtId,
                })
          this.DCDUtime =
            remarkInfo.DpiaChapterDcoUpdatetime ||
            remarkInfo.DpiaChapterDcoCreatetime
          this.username = remarkInfo.DpiaChapterDcoUserName
        } catch (error) {
          console.log('error:', error)
          this.$message.error(error)
        }
      },
    },
    watch: {
      // 实时监听当前用户是否有可编辑的输入框
      exchangelist: {
        deep: true, // 深度监听数组内部的变化
        handler(newVal, oldVal) {
          // console.log("数组发生变化", newVal, oldVal);
          // 遍历获取是否当前用户有可用的输入框
          const aflag = false
          this.exchangelist.forEach((element) => {
            if (element.DpiaCommentsDCOid == this.DcoId22) {
              aflag = true
            }
          })
          this.ifflag = !aflag
        },
      },
    },
  }
  </script>
  
  <style lang="less" scoped>
  /deep/ .ant-card-body {
    // display: flex;
    .buttomm {
      width: 100%;
    }
  
    .card-box {
      width: 100%;
      height: 100%;
      font-size: 15.5px;
      display: flex;
      overflow: auto;
      justify-content: space-between;
      height: auto;
      & > .card-left {
        height: 100%;
      }
    }
  
    .card-left {
      /*rectangle copy 4备份 87*/
      margin: 0 30px 30px 0;
      color: #444e84;
      left: 339px;
      top: 287px;
      width: 388px;
      min-height: 390px;
      opacity: 0.67;
      border-radius: 2px;
      background: #f7faff;
      &.max ul {
        max-height: 370px;
        overflow-y: scroll;
        &::-webkit-scrollbar {
          width: 8px;
        }
        &::-webkit-scrollbar {
          background-color: #fafcfe;
        }
        &::-webkit-scrollbar-thumb {
          background-color: #6299cf;
          border-radius: 10px;
        }
      }
      ul {
        margin-top: 10px;
      }
      ul li {
        padding: 3px;
      }
    }
  
    .left-title {
      color: #050c34;
      width: 100%;
      line-height: 40px;
      padding: 0 10px;
      padding-left: 20px;
      background: #e7f0ff;
      border-bottom: 1px solid #ddd;
    }
  
    .card-right {
      // margin: 30px 30px 30px 350px;
      flex: 1;
      z-index: 1;
      right: 0;
      width: auto;
    }
  
    p {
      color: #000;
    }
  }
  
  .tags {
    left: 298px;
    top: 288px;
    width: 6px;
    height: 14px;
    opacity: 1;
    border-radius: 2px;
    background: rgba(0, 80, 247, 1);
  }
  
  // .ant-pagination {
  //   float: right;
  // }
  
  .left-title1 {
    color: #050c34;
    width: 100%;
    line-height: 40px;
    padding: 0 10px;
    padding-left: 20px;
    background: #e7f0ff;
    border-bottom: 1px solid #ddd;
  }
  
  .left-title11 {
    color: #050c34;
    width: 100%;
    line-height: 40px;
    padding: 0 10px;
    padding-left: 20px;
    background: #e7f0ff;
    border-bottom: 1px solid #ddd;
  }
  
  .ant-card {
    overflow: auto;
    height: auto;
  }
  
  [data-v-23a62919] [data-v-23a62919] .drawer-form .ant-form-item-label {
    display: inline-block;
    line-height: 20px;
    width: 100px;
    margin-right: 10px;
    margin-top: 10px;
    margin-left: 10px;
    overflow: visible !important;
    margin-right: 38px;
  }
  
  /deep/ .ant-card[data-v-fd046f26] {
    height: 2500px !important;
  }
  
  .dlex {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    justify-content: space-between;
  }
  </style>
  